<template>
	<el-form
		ref="formRef"
		:inline="true"
		:model="queryData"
		class="flex-warp-container"
	>
		<el-form-item
			label="所属商户:"
			class="flex-row-container"
			label-width="77px"
		>
			<merchant-select
				v-model="queryData.merchantId"
				placeholder="默认选择全部"
			></merchant-select>
		</el-form-item>
		<el-form-item class="flex-row-container">
			<el-input
				v-model="queryData.userName"
				class="input-with-select"
				:placeholder="$t('common.please_enter')"
				clearable
				size="medium"
				style="width: 330px"
			>
				<el-select
					slot="prepend"
					v-model="queryData.userType"
					:placeholder="$t('common.please_choose')"
					style="width: 110px"
					v-if="activeName == 'TeamBenefits'"
				>
					<el-option label="代理账号" :value="2"></el-option>
					<el-option label="会员账号" :value="0"></el-option>
				</el-select>
				<el-select
					slot="prepend"
					v-model="queryData.userType"
					:placeholder="$t('common.please_choose')"
					style="width: 110px"
					v-else
				>
					<el-option label="代理账号" :value="1"></el-option>
					<el-option label="会员账号" :value="0"></el-option>
				</el-select>
			</el-input>
		</el-form-item>
		<el-form-item
			label="账单周期"
			class="flex-row-container"
			label-width="77px"
		>
			<el-select
				v-model="queryData.billEndDate"
				placeholder="请选择"
				style="width: 350px"
			>
				<el-option
					v-for="item in billDateList"
					:key="item.code"
					:label="item.description"
					:value="item.code"
				></el-option>
			</el-select>
		</el-form-item>

		<el-form-item class="flex-row-container">
			<el-button
				type="primary"
				icon="el-icon-search"
				size="medium"
				@click="search"
			>
				{{ $t('common.search') }}
			</el-button>
			<el-button icon="el-icon-refresh-left" size="medium" @click="reset">
				{{ $t('common.reset') }}
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    billDateList: {
      type: Array,
      default: () => []
    },
    activeName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      queryData: {
        merchantId: '',
        userType: this.activeName == 'TeamBenefits' ? 2 : 1,
        userName: '',
        billEndDate: ''
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        this.queryData = val
      },
      immediate: true
    },
    queryData(val) {
      this.$emit('input', val)
    },
    activeName(newVal, oldVal) {
      if (newVal == 'TeamBenefits' && this.queryData.userType == 1) {
        this.queryData.userType = 2
      } else if (oldVal == 'TeamBenefits' && this.queryData.userType == 2) {
        this.queryData.userType = 1
      }
    }
  },
  methods: {
    reset() {
      this.$emit('reset')
    },
    search() {
      this.$emit('search')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
